<template>
<div class="get-user-info">
    <el-dropdown-item @click.native="formVisible = true">个人信息</el-dropdown-item>
    <el-dialog title="用户详情" :append-to-body="true" :visible.sync="formVisible">
        <el-card shadow="never">
            <div class="userinfo">
                <span>登录帐号：{{dataForm.userLoginName}}</span>
                <el-divider></el-divider>
                <span>区域：{{dataForm.administrativeName}}</span>
                <el-divider></el-divider>
                <span>姓名：{{dataForm.realName}}</span>
                <el-divider></el-divider>
                <span>身份证号码：{{dataForm.registerCard}}</span>
                <el-divider></el-divider>
                <span>手机号码：{{dataForm.mobile}}</span>
                <el-divider></el-divider>
                <span>身份：{{dataForm.userIdenty}}</span>
                <el-divider></el-divider>
                <span v-if="dataForm.createTime">注册时间：{{createTime}}</span>
            </div>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button type="warning" @click="formVisible = false">关 闭</el-button>
            <!-- <el-button type="primary" @click="disabled = !disabled">前往编辑</el-button>
            <el-button type="success" v-if="disabled">修改信息</el-button> -->
        </div>
    </el-dialog>
</div>
</template>

<script>
import { formatDate } from "@/library";
export default {
    name: "userInfo",
    props: {
        form: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    data() {
        return {
            formVisible: false,
            value: "",
            disabled: false,
            formLabelWidth: "120px",
        };
    },
    computed: {
        createTime(){
           return formatDate(+new Date(this.dataForm.createTime))
        },
        dataForm() {
            if (Object.keys(this.form).length) {
                return this.form
            } else {
                return {
                    roles:[
                        {
                            remark:0,
                            createTime:""
                        }
                    ]
                }
            }

        }
    },
};
</script>

<style lang="scss" scoped>
.get-user-info {
    display: inline;
}

.userinfo {
    span {
        display: block;
        padding: 10px 0;
        line-height: 30px;
    }
}
</style>
